<template>
	<view>
		<!-- 0.0 自定义头部的返回 -->
		<navigator class="go_back" open-type="navigateBack">回</navigator>
		<!-- 1.0 图片滑动区域 -->
		<swiper class="swiper" indicator-dots>
			<swiper-item v-for="item in pics" :key="item.pics_id">
				<image @tap="previewImageHandle(item.pics_big)" class="swiper_image" :src="item.pics_big" />
			</swiper-item>
		</swiper>
		<!-- 2.0 商品基本信息 -->
		<view class="info">
			<view class="info_head">
				<view class="info_head_price goods_price">{{ goods_price }}</view>
				<view class="info_head_icongroup">
					<!-- 开放能力按钮平台兼容_只支持小程序端 -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="iconfont icon-fenxiang">
						<button class="open_type_button" open-type="share">分享</button>
					</view>
					<!-- #endif -->
					<view class="iconfont icon-shoucang"></view>
				</view>
			</view>
			<view class="info_name">
				{{ goods_name }}
			</view>
		</view>
		<view class="divider"></view>
		<!-- 3.0 商品图文详情 -->
		<view class="introduce">
			<view class="introduce_title">图文详情</view>
			<view class="introduce_main">
				<rich-text :nodes="goods_introduce"></rich-text>
			</view>
		</view>
		<!-- 4.0 底部操作栏 -->
		<view class="bottom">
			<!-- #ifdef MP-WEIXIN -->
			<view class="iconfont icon-kefu">联系客服 <button class="open_type_button" open-type="contact">联系客服</button> </view>
			<!-- #endif -->
			<navigator open-type="switchTab" url="/pages/cart/main" hover-class="none" class="iconfont icon-gouwuche">购物车</navigator>
			<view @tap="addToCart" class="bottom_btn">加入购物车</view>
			<view class="bottom_btn">立即购买</view>
		</view>
	</view>
</template>

<script>
	// uni-app 行为写这里
	export default {
		data() {
			return {
				options: {},
				pics: [],
				// 默认值其实可以作为请求到数据前的<占位文字>
				goods_name: '商品名称',
				goods_price: '',
				goods_introduce: '',
				goods_small_logo: '',
			}
		},
		onLoad(options) {
			// 把页面参数存起来
			this.options = options;
			// 获取商品详情的数据
			this.getGoodsDetail();
		},
		// uni-app 事件写到 methods 中
		methods: {
			// 点击加入购物车 - 数据是为购物车页准备的
			// 需要的数据：商品id，商品图片，商品名称，商品价格，   商品数量，商品选中状态
			// [ { goods_id:111, goods_name: xxx }, { goods_id:222, goods_name: xxx }]
			addToCart(){
				// console.log('点击加入购物车事件绑定成功');
				/* 
					点击加入购物车
						1. 获取本地存储购物列表数据 cartList
						2. 判断当前商品是否在购物车列表中
								1. 不存在(新商品)    商品数量初始化1，添加选中状态
								2. 已存在(旧商品)    基于原本的商品数量累加1，添加选中状态
				*/
				// 1. 获取本地存储购物列表数据 cartList
				const cartList = uni.getStorageSync('cartList') || [];
				// 2. 判断当前商品是否在购物车列表中
				const index = cartList.findIndex(item=> item.goods_id === this.options.goods_id);
				// console.log('cartList', cartList);
				// console.log('index', index);
				// 通过判断返回的索引值，检测当前商品是否存在于本地存储购物车中
				if(index === -1){
					console.log('1. 不存在(新商品)    商品数量初始化1，添加选中状态');
					// 初始化商品对象：商品id，商品图片，商品名称，商品价格， 商品数量，商品选中状态
					const goodsObj = {
						goods_id: this.options.goods_id,
						goods_small_logo: this.goods_small_logo,
						goods_name: this.goods_name,
						goods_price: this.goods_price,
						goods_count: 1,				// 商品数量初始化为 1
						goods_check: true,		// 添加选中状态
					}
					// 把商品对象添加到数组中
					cartList.push(goodsObj);
				}else{
					console.log('2. 已存在(旧商品)    基于原本的商品数量累加1，添加选中状态');
					cartList[index].goods_count += 1;			 // 商品数量累加 1
					cartList[index].goods_check = true;		 // 添加选中状态
				}

				// 把数组写入到本地存储中
				uni.setStorageSync('cartList', cartList);
				// 加入购物车成功的提示
				uni.showToast({
					title: '加入成功',
					duration: 1000,
					mask: true,   // 添加透明蒙层，防止触摸穿透
				});

			},
			// 调用微信内部的预览图片功能
			previewImageHandle(current){
				// console.log(current);
				// 把原本的数组的结构映射成符合小程序接口的格式
				// Array.<string>   数组每一项是字符串(图片地址)
				const urls = this.pics.map(item=>item.pics_big);
				// console.log(urls);   // 打印测试
				// 调用原生微信的全屏预览图片功能。预览的过程中用户可以进行保存图片、发送给朋友等操作。
				uni.previewImage({ urls, current });
			},
			async getGoodsDetail(){
				// 获取商品详情数据
				const res = await this.$https.get('/goods/detail', {params:{ goods_id: this.options.goods_id }})
				console.log(res);
				// 解构出当前页面需要绑定的数据
				let { pics, goods_name, goods_price, goods_introduce, goods_small_logo } = res;
				// 仅仅把页面需要绑定的数据更新到 data 中
				this.pics = pics;
				this.goods_name = goods_name;
				this.goods_price = goods_price;
				this.goods_small_logo = goods_small_logo;

				// 获取系统信息
				const { system } = uni.getSystemInfoSync();
				// console.log('systemInfo', system);
				// 判断当前系统是否为 iOS 系统
				if( system.includes('iOS') ){
					console.log('当前为 iOS 平台，需要把 webp 图片替换成 jpg');
					// 如果是 iOS 系统，不能识别 webp 图片，需要全部替换成 jpg 图片地址
					goods_introduce = goods_introduce.replace(/webp/g, 'jpg');  // g 代表替换全部 global
				}
				// 给所有的图片标签添加一个 rich_image 的类名，通过类名样式去除图片底部的大缝隙。
				this.goods_introduce = goods_introduce.replace(/<img/g, '<img class="rich_image"');
			}
		}
	}
</script>

<style lang="less">
	.swiper,
	.swiper_image{
		width: 750rpx;
		height: 750rpx;
	}
	.go_back{
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left:50rpx;
		top:50rpx;
		border-radius: 50%;
		background-color: rgba(0, 0, 0, 0.5);
		color:#fff;
		z-index: 10;
	}
	// 商品基本信息
	.info {
		padding:10rpx 30rpx;
		.info_head {
			padding: 10rpx 0;
			display: flex;
			justify-content: space-between;
			align-content: center;
			.info_head_price {
				font-size: 38rpx;
			}
			.info_head_icongroup {
				display: flex;
				align-items: center;
				.iconfont {
					margin:0 10rpx;
					color:#898989;
					font-size: 45rpx;
				}
			}
		}

		.info_name {
			font-size: 30rpx;
			// 文本任意字符间断行
			word-break: break-all;
		}
	}
	// 因为按钮的默认样式太多了，修改起来成本过高，通用性低，直接把按钮定位并设置透明度为 0 即可
	.iconfont{
		position: relative;
		overflow: hidden;
	}
	.open_type_button{
		position: absolute;
		width: 100%;
		height: 100%;
		left:0;
		top:0;
		opacity: 0;
	}
	// 分隔物
	.divider{
		height: 20rpx;
		background-color: #f0f0f0;
	}
	.introduce{
		.introduce_title{
			height: 80rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.introduce_main{
			// font-size: 0;      		// 如果父元素字号为0，其实图片之间也是没有缝隙的
			padding-bottom: 100rpx;   // 防止底部的定位的操作栏盖住了富文本的内容
		}
	}
	// 针对浏览器端，使用 /deep/ 不变成局部样式类名，因为浏览端富文本无法识别局部类名。
	/deep/ .rich_image{
		// 去除图片底部缝隙
		vertical-align: middle;
	}
	/* 底部操作栏 */
	.bottom{
		position: fixed;
		left:0;
		right: 0;
		bottom: 0;
		height: 94rpx;
		background-color: #fff;
		border-top: 1rpx solid #ddd;
		display: flex;
		align-items: center;
		padding: 0 10rpx;
		.iconfont{
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 20rpx;
			&::before{
				font-size: 40rpx;
			}
		}
		.bottom_btn{
			width: 196rpx;
			height: 60rpx;
			color:#fff;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			background-color: #FCAA23;
			margin: 0 10rpx;
			&:last-child{
				background-color: #EA4350;
			}
		}
	}
	
</style>
